import {Platform, StyleSheet, Dimensions} from "react-native";
import {colors} from "../../styles";

const {width, height} = Dimensions.get('window');

const styles = StyleSheet.create({
  safeAreaContainer: {
    flex: 1,
    backgroundColor: colors.white
  },
  container: {
    flex: 1,
    backgroundColor: colors.white
  },
  header: {
    height: 60,
    borderBottomColor: '#EBF2F6',
    borderBottomWidth: 1,
    paddingLeft: 15,
    paddingRight: 15,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    backgroundColor: colors.white
  },
  headerLeft: {
    flex: 1
  },
  headerCenter: {
    flex: 1
  },
  headerRight: {
    flexDirection: 'row',
    flex: 1,
    justifyContent: 'flex-end'
  },
  headerCenterText: {
    fontSize: 20,
    fontWeight: 'bold',
    textAlign: 'center',
    color: '#354B5B'
  },
  headerRightLayout: {
    marginLeft: 16
  },
  scrollContainer: {
    flex: 1,
    backgroundColor: colors.white
  },
  tradeTopContainer: {
    height: 357,
    backgroundColor: colors.backgroundGray,
    flex: 1,
  },
  tradeTopInner: {
    flex: 1,
    padding: 15,
    marginBottom: 10,
    backgroundColor: colors.white,
    flexDirection: 'row',
    justifyContent: 'space-between'
  },
  tradeTopLeft: {
    width: width * 0.48,
    justifyContent: 'space-between'
  },
  topLeftSwitch: {
    height: 35,
    justifyContent: 'space-between',
    flexDirection: 'row'
  },
  leftSwitchButton: {
    borderTopLeftRadius: 13,
    backgroundColor: colors.lightButtonBGGray,
    width: width * 0.23,
    alignItems: 'center'
  },
  rightSwitchButton: {
    borderBottomRightRadius: 13,
    backgroundColor: colors.lightButtonBGGray,
    width: width * 0.23,
    alignItems: 'center'
  },
  switchButtonText: {
    fontSize: 16,
    color: colors.lightTextGray,
    height: 35,
    ...Platform.select({
      ios: {lineHeight: 35},
      android: {textAlignVertical: 'center'}
    })
  },
  priceLimitText: {
    fontSize: 14,
    color: colors.lightTextGray
  },
  inputWrap: {
    borderRadius: 4,
    borderWidth: 1,
    borderColor: colors.borderGray,
    flexDirection: 'row'
  },
  inputItem: {
    flex: 1,
    height: 42,
    padding: 2,
    fontWeight: 'bold',
    color: colors.darkTextGray,
  },
  inputItemRightText: {
    color: colors.darkTextGray,
    fontSize: 14,
    paddingLeft: 5,
    paddingRight: 5,
    ...Platform.select({
      ios: {lineHeight: 42},
      android: {textAlignVertical: 'center'}
    })
  },
  transformCNYText: {
    fontSize: 12,
    color: colors.placeholderTextGray
  },
  volumeContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between'
  },
  volumeItem: {
    width: width * 0.1,
    borderWidth: 1,
    borderColor: colors.darkBorderGray
  },
  volumeItemText: {
    color: colors.lightTextGray,
    textAlign: 'center',
    fontSize: 10,
    height: 18,
    ...Platform.select({
      ios: {lineHeight: 18},
      android: {textAlignVertical: 'center'}
    })
  },
  summaryWrap: {
    flexDirection: 'row',
    justifyContent: 'space-between'
  },
  summaryTextLeft: {
    fontSize: 12,
    color: colors.lightTextGray
  },
  summaryTextRight: {
    fontSize: 12,
    color: colors.darkTextGray
  },
  buttonWrap: {
    height: 44
  },
  buttonItem: {
    fontSize: 16,
    color: colors.white,
    fontWeight: 'bold',
    lineHeight: 44
  },
  buttonPlugIn: {
    backgroundColor: colors.placeholderGray
  },
  tradeTopRight: {
    width: width * 0.4,
    justifyContent: 'space-between'
  },
  topRightHeader: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  rightHeaderText1: {
    fontSize: 10,
    color: colors.lightTextGray,
    flex: 2
  },
  rightHeaderText2: {
    fontSize: 10,
    color: colors.lightTextGray,
    flex: 6,
    textAlign: 'right'
  },
  rightHeaderText3: {
    fontSize: 10,
    color: colors.lightTextGray,
    flex: 5,
    textAlign: 'right'
  },
  listWrap: {
    height: 120
  },
  priceShowWrap: {
    height: 48
  },
  priceShowText1: {
    fontSize: 23
  },
  priceShowText2: {
    fontSize: 12,
    color: colors.lightTextGray
  },
  listItem: {
    height: 24,
    alignItems: 'center',
    flexDirection: 'row',
    zIndex: 9
  },
  listItemText1: {
    fontSize: 12,
    flex: 2,
    color: colors.darkTextGray
  },
  listItemText2: {
    fontSize: 12,
    flex: 6,
    textAlign: 'right'
  },
  listItemText3: {
    fontSize: 12,
    flex: 5,
    textAlign: 'right',
    color: colors.darkTextGray
  },
  tradeBottomContainer: {
    backgroundColor: colors.white, flex: 1, justifyContent: 'flex-end'
  },
  bottomHeader: {
    paddingLeft: 15, paddingRight: 15,height: 55, justifyContent: 'space-between', flexDirection: 'row', alignItems: 'center', borderBottomWidth: 1, borderColor: colors.darkBorderGray
  },
  bottomHeaderLeftText: {
    fontSize: 18, color: colors.darkTextGray
  },
  bottomHeaderRight: {
    flexDirection: 'row', alignItems: 'center'
  },
  headerRightText1: {
    marginLeft: 5
  },
  headerRightText2:{
    marginLeft: 5, fontSize: 14
  },
  bottomListWrap: {
    marginBottom: 30
  },
  bottomList: {
    height: 104, borderBottomWidth: 1, borderColor: colors.borderGray, paddingLeft: 15, paddingRight: 15
  },
  listTop: {
    flexDirection: 'row', flex: 1, alignItems: 'center', justifyContent: 'space-between'
  },
  listTopLeft: {
    flexDirection: 'row', alignItems: 'flex-end'
  },
  listTopLeftText1:{
    fontSize: 16, marginRight: 10
  },
  listTopLeftText2:{
    fontSize: 12, color: colors.lightTextGray
  },
  listTopRight: {
    height: 25, width: 58, borderColor: colors.green,borderRadius: 2,borderWidth: 1
  },
  listTopRightText: {
    fontSize: 12, textAlign: 'center', height: 23, color: colors.green,
    ...Platform.select({
      ios: {lineHeight: 23},
      android: {textAlignVertical: 'center'}
    })
  },
  listBottom: {
    flexDirection: 'row', flex: 1, justifyContent: 'space-between'
  },
  listBottomItem: {
    flex: 1
  },
  listBottomItemText11: {
    fontSize: 12, color: colors.lightTextGray
  } ,
  listBottomItemText12:{
    fontSize: 12, color: colors.lightTextGray, textAlign: 'center'
  },
  listBottomItemText13:{
    fontSize: 12, color: colors.lightTextGray, textAlign: 'right'
  },
  listBottomItemText21:{
    marginTop: 5,fontSize: 14, color: colors.darkTextGray
  },
  listBottomItemText22:{
    marginTop: 5,fontSize: 14, color: colors.darkTextGray, textAlign: 'center'
  },
  listBottomItemText23:{
    marginTop: 5,fontSize: 14, color: colors.darkTextGray, textAlign: 'right'
  },
});

export default styles;